<template>
  <aside :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]">
    <div class="aui-sidebar__inner">
      <div class="menu_list">
        <a href="javascript:;" v-for="(item, index) in $store.state.imUserList.minList" :class="{active: menuActive === index}" :key="item.hxAccount + index" @click="openTeacher(item, index)">
          <img :src="item.userPic" alt=""> <span>{{item.name}}</span>
        </a>
      </div>
    </div>
  </aside>
</template>

<script>
import { moduleRoutes } from '@/router'
export default {
  data () {
    return {
      menuActive: -1
    }
  },
  components: {
  },
  created () {
  },
  methods: {
    // 切换值班老师
    openTeacher (row, index) {
      this.menuActive = index
      // 组装路由名称, 并判断是否已添加, 如是: 则直接跳转
      var routeName = `activity__${row.hxAccount}`
      var route = window.SITE_CONFIG['dynamicRoutes'].filter(item => item.name === routeName)[0]
      if (route) {
        return this.$router.push({ name: routeName, params: { 'name': row.hxAccount, 'password': row.password } })
      }
      // 否则: 添加并全局变量保存, 再跳转
      route = {
        path: routeName,
        component: () => import(`@/views/modules/sys/index`),
        name: routeName,
        meta: {
          ...window.SITE_CONFIG['contentTabDefault'],
          menuId: `this${row.hxAccount}`,
          title: `${row.name}`
        }
      }
      this.$router.addRoutes([
        {
          ...moduleRoutes,
          name: `main-dynamic__${row.hxAccount}`,
          children: [route]
        }
      ])
      window.SITE_CONFIG['dynamicRoutes'].push(route)
      this.$router.push({ name: route.name, params: { 'name': row.hxAccount, 'password': row.password } })
    }
  }
}
</script>
<style scoped lang="scss">
  .menu_list{
    a{
      text-decoration: none;
      color: #333333;
      font-size: 14px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 10px 0;
      &:hover{
        background-color: rgba(10, 220, 255, 0.09);
      }
      img{
        width: 35px;
        height: 35px;
        border-radius: 50px;
        margin-right: 10px;
        margin-left: 10px;
      }
      span{
        font-size: 16px;
        color: #666666;
      }
    }
    .active{
      color: #2F99F3;
      span{
        color: #2F99F3;
      }
    }
  }
</style>
